<template>
  <div class="bsContent" v-if="data.json_content">
    <headerTop :isActive="true"></headerTop>
    <div class="groundImg">
      <img :src="data.home_image" alt="" />
      <span> 《{{ data.json_content.oneDataArticle.title }}》 </span>
    </div>
    <div class="contentBox">
      <div class="title">
        {{ data.json_content.title }}
      </div>
      <div class="author">
        <span>{{ data.json_content.simple_author[0] }}</span>
        <img src="@/assets/胶卷.png" alt="" />
      </div>
      <div>
        <div v-html="data.json_content.content"></div>
      </div>
      <Editor :edit="data" :comments="comments"></Editor>
    </div>
    <bottomBar :data="data"></bottomBar>
  </div>
</template>

<script>
import { getArticleContent, getComment } from "@/api/articlesPage";
import headerTop from "@/components/headerTop";
import Editor from "@/components/editor";
import bottomBar from "@/components/bottomBar";
export default {
  name: "bookShadowContent",
  components: {
    headerTop,
    Editor,
    bottomBar,
  },
  data() {
    return {
      data: {},
      comments: {},
    };
  },
  created() {
    this.getShadowContent();
  },
  methods: {
    async getShadowContent() {
      const { data } = await getArticleContent(this.$route.params.id, "movie");
      this.data = data;
      console.log("书影内容", this.data);
      if (this.data.json_content) {
        this.getComments();
      }
    },
    async getComments() {
      // 获取阅读的评论
      const { data } = await getComment(
        this.data.json_content.type,
        this.data.id,
        this.commentId
      );
      this.comments = data;
      console.log(this.comments);
    },
  },
};
</script>

<style lang="less" scoped>
.bsContent {
  padding-top: 30px;
  .groundImg {
    position: relative;
    span {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 14px;
      color: #fff;
    }
  }
  .contentBox {
    padding: 0 15px;

    .title {
      font-size: 24px;
      color: #000;
      font-weight: 800;
      margin: 40px 0;
    }
    .author {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 40px;
      span {
        font-size: 14px;
        color: #000;
      }
      img {
        width: 20px;
        display: block;
      }
    }
  }

  ::v-deep p {
    margin: 10px 0;
  }
}
</style>